<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件与子组件注册</title>
    <script src="./js/vue.js"></script>
</head>
<body>

 <div id="app">
     <compon>
     </compon>
     <cpn3></cpn3>

 </div>
    <script>
        //创建子组件构造器
        const conC2 = Vue.extend({
            template: `
             <div>
                 <h2> 子组件 </h2>
                 <h3>这是子组件内容</h3>
             </div>
            `
        });
        //创建父组件构造器
        const cpn1 = Vue.extend({
            template:`
                <div>
                    <h2>这是父组件</h2>
                    <h3>这是父组件内容</h3>
                    <cpn2></cpn2>
                </div>
            `,
            components:{
                //注册子组件
                cpn2:conC2
            }
        });
        //全局注册父组件
        Vue.component("compon",cpn1);

        //语法糖
        Vue.component("cpn3",{
            template:`
                <div>
                    <h3>语法糖格式</h3>
                    <h4>sa</h4>
                </div>
            `
        });

        let vm = new Vue({
            el: "#app",
        })


    </script>

</body>
</html>